<template>
  <el-card class="scroll-item" v-scroll-reveal.reset shadow="always">
        <div slot="header" class="d-flex align-items-center">
           <i class="iconfont icon-archive"></i>
            <span>{{cardHeader}}</span>
        </div>
        <div class="text item">
            <el-link :underline="false"  v-for="(item,index) in archives" @click="view(item.year, item.month)"  :key="index">{{`${item.year}年${item.month}月`}}</el-link>
        </div>
  </el-card>
</template>

<script>
export default {
    name: 'Archive',
    props: {
        cardHeader: {
            type: String,
            required: true
        },
        archives: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    methods:{
        view(year, month) {
            this.$router.push({path: `/archives/${year}/${month}`})
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.el-card
    i
        font-size 14px
        color #437dff
        font-weight bold
    span
        font-weight bold
    .item
        width 100%
        font-size 14px
        .el-link   
            display inline-block
            width 50%
            line-height 2
            
</style>
